<template>
    <div class="app-container">
        <!-- 在这里可以打印 switchListInfo 以便调试 -->
        <!-- {{ switchListInfo }} -->
        <el-collapse accordion v-if="!loading && Object.keys(switchListInfo).length > 0">
            <el-collapse-item v-for="(flows, dpid) in switchListInfo" :key="dpid" :title="dpid">
                <div v-for="(flow, index) in flows" :key="index">
                    <p><strong>Byte Count（字节计数）:</strong> {{ flow.byte_count }}</p>
                    <p><strong>Cookie（Cookie值）:</strong> {{ flow.cookie }}</p>
                    <p><strong>Duration (sec)（持续时间秒）:</strong> {{ flow.duration_sec }}</p>
                    <p><strong>Duration (nsec)（持续时间纳秒）:</strong> {{ flow.duration_nsec }}</p>
                    <p><strong>Flags（标志位）:</strong> {{ flow.flags }}</p>
                    <p><strong>Hard Timeout（硬超时）:</strong> {{ flow.hard_timeout }}</p>
                    <p><strong>Idle Timeout（空闲超时）:</strong> {{ flow.idle_timeout }}</p>
                    <p><strong>Importance（优先级）:</strong> {{ flow.importance }}</p>
                    <p><strong>Instructions（指令集）:</strong></p>
                    <ul>
                        <li v-for="(instruction, insIndex) in flow.instructions" :key="insIndex">
                            <p><strong>Type（类型）:</strong> {{ instruction.type }}</p>
                            <ul>
                                <li v-for="(action, actIndex) in instruction.actions" :key="actIndex">
                                    <p><strong>Action Type（动作类型）:</strong> {{ action.type }}</p>
                                    <p><strong>Port（端口号）:</strong> {{ action.port }}</p>
                                    <p><strong>Max Len（最大长度）:</strong> {{ action.max_len }}</p>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <p><strong>Length（长度）:</strong> {{ flow.length }}</p>
                    <p><strong>Match（匹配条件）:</strong></p>
                    <ul>
                        <li v-for="(value, key) in flow.match" :key="key">
                            <p><strong>{{ key }}:</strong> {{ value }}</p>
                        </li>
                    </ul>
                    <p><strong>Packet Count（数据包计数）:</strong> {{ flow.packet_count }}</p>
                    <p><strong>Priority（优先级）:</strong> {{ flow.priority }}</p>
                    <p><strong>Table ID（表ID）:</strong> {{ flow.table_id }}</p>
                </div>
            </el-collapse-item>
        </el-collapse>
        <div v-else>
            <i v-if="loading" class="el-icon-loading"></i> 加载中...
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: "flowList",
    data() {
        return {
            switchList: [],
            switchListInfo: {},
            loading: true
        };
    },
    async created() {
        try {
            const switchesRes = await axios.get('/ryu/stats/switches', {
                headers: {
                    'Access-Control-Allow-Origin': '*'
                }
            });
            this.switchList = switchesRes.data;

            for (let dpid of this.switchList) {
                const descRes = await axios.get(`/ryu/stats/flow/${dpid}`, {
                    headers: {
                        'Access-Control-Allow-Origin': '*'
                    }
                });
                // 使用从请求中获取的DPID 作为键
                this.switchListInfo[dpid] = descRes.data[dpid];
            }
        } catch (error) {
            console.error(error);
        } finally {
            this.loading = false;
        }
        await this.$message({
            message: '设备加载完成',
            type: 'success'
        });
    },
    methods: {
        switchInfo(dpid) {
            console.log(dpid);
            this.$router.push({
                path: "/sdnpanel/switchInfo",
                query: { dpid: dpid },
            });
        }
    }
};
</script>

<style>
/* 添加一些基本样式 */
.app-container {
    padding: 20px;
}

.el-collapse {
    width: 100%;
}

.el-collapse-item__header {
    font-weight: bold;
}

.el-collapse-item__content {
    padding-left: 20px;
}

.el-icon-loading {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>